---
title: SectionList
---

import sectionlistHomogenous from '../../../examples/files/core_components/sectionlistHomogenous.js'
import sectionlistHeterogenous from '../../../examples/files/core_components/sectionlistHeterogenous.js'

`SectionList`s are like `FlatList`s, but they can have section headers to separate groups of rows.

`SectionList`s render each item in their input `sections` using the `renderSectionHeader` and `renderItem` prop. Each item in `sections` should be an object with a unique id (the key), and an array `data` of row data. Each item in `data` should also be an object with a unique id. The `renderSectionHeader` prop is a function which takes an item from the `sections` array and maps it to a React Element. The `renderItem` prop, just like for `FlatList`, is a function which takes an item from the `data` array (for a section) and returns a React Element.

## Homogenous row example

If each row is rendered with the same `renderItem` function, we call this homogenous rendering.

<Example code={sectionlistHomogenous} />

## Heterogenous row example

A `renderItem` function may be specified as part of the `sections` data, one per section, rather than as a `prop` of the `SectionList`. This lets us render each section differently. Alternately, you could use the item data to determine how to render items differently.

<Example code={sectionlistHeterogenous} />
